import {useNavigate} from "react-router-dom";
import {useEffect, useState} from "react"
import styles from "./index.module.scss";

const Index = () => {

    const navigate = useNavigate();


    const go = () => {
        navigate("/test");
    }


    useEffect(() => {
        getRequestList()
    }, [])

    const [resList, handleResList] = useState<any>([]);
    const getRequestList = () => {
        myRequest().then(res => {
            console.log("res", res);
            handleResList(res)
        }).catch(e => {
            console.log(e)
        })
    }
    useEffect(() => {
        console.log("resList", resList);
    }, [resList])

    const myRequest = () => {
        // 请求接口返回假数据
        return new Promise(((resolve, reject) => {
            // api request
            const resList = [
                {
                    coinName: "BLA",
                    status: "Active",
                    coinLogo: "",
                    coinPrice: "$3,412,025.12",
                    expiryDate: "End: 08/Sept/2022 16:00",
                },
                {
                    coinName: "USDT",
                    status: "Active",
                    coinLogo: "",
                    coinPrice: "$3,412,025.12",
                    expiryDate: "End: 08/Sept/2022 16:00",
                },
                {
                    coinName: "BTC",
                    status: "Terminated",
                    coinLogo: "",
                    coinPrice: "$3,412,025.12",
                    expiryDate: "End: 08/Sept/2022 16:00",
                },
                {
                    coinName: "TSH",
                    status: "Terminated",
                    coinLogo: "",
                    coinPrice: "$3,412,025.12",
                    expiryDate: "End: 08/Sept/2022 16:00",
                },
                {
                    coinName: "ATOM",
                    status: "Terminated",
                    coinLogo: "",
                    coinPrice: "$3,412,025.12",
                    expiryDate: "End: 08/Sept/2022 16:00",
                },
                {
                    coinName: "FIL",
                    status: "Terminated",
                    coinLogo: "",
                    coinPrice: "$3,412,025.12",
                    expiryDate: "End: 08/Sept/2022 16:00",
                },
                {
                    coinName: "ETC",
                    status: "Terminated",
                    coinLogo: "",
                    coinPrice: "$3,412,025.12",
                    expiryDate: "End: 08/Sept/2022 16:00",
                },
                {
                    coinName: "ETH",
                    status: "Active",
                    coinLogo: "",
                    coinPrice: "$3,412,025.12",
                    expiryDate: "End: 08/Sept/2022 16:00",
                }
            ]
            resolve(resList)
        }))
    }
    return (
        <div>
            <div className={styles.box}>
                {resList.map((item:any, key:number) => {
                    return (
                        <div className={styles.box__item} key={key}>
                            <div className={styles.box__item__top}>
                                <div className={styles.box__item__top__p1}>{item.coinName}</div>
                                <div>
                                    <img src={item.coinLogo}/>
                                    <span className={styles.box__item__top__p2}>{item.status}</span>
                                </div>
                            </div>
                            <div className={styles.box__item__bottom}>
                                <div className={styles.box__item__bottom__imageEa}></div>
                                <div className={styles.box__item__bottom__textEa}>
                                    <div className={styles.box__item__bottom__textEa__p1}>{item.coinPrice}</div>
                                    <div className={styles.box__item__bottom__textEa__p2}>{item.expiryDate}
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

export default Index
